<template>
  <div>
    <div class="banner" :style="cover"  />

    <el-row class="home-container" >
      <!-- 左侧菜单     -->
      <el-col :span="4">
        <v-card shadow="hover" style="border: 1px solid #8c939d;">
          <el-menu default-active="1" class="el-menu-vertical-demo"  @select="handleSelect">
            <el-menu-item index="1">
              <i class="el-icon-user"></i>
              <span slot="title">个人资料</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-setting"></i>
              <span slot="title">账号设置</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-warning-outline"></i>
              <span slot="title">隐私设置</span>
            </el-menu-item>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-folder-opened"></i>
                <span>管理</span>
              </template>
              <el-menu-item index="3-1">内容管理</el-menu-item>
              <el-submenu index="3-2">
                <template slot="title">专栏管理</template>
                <el-menu-item index="3-2-1">创建专栏</el-menu-item>
                <el-menu-item index="3-2-2">专栏列表</el-menu-item>
              </el-submenu>
              <el-submenu index="3-3">
                <template slot="title">评论管理</template>
                <el-menu-item index="3-3-1">发布的评论</el-menu-item>
                <el-menu-item index="3-3-2">收到的评论</el-menu-item>
              </el-submenu>
              <el-menu-item index="3-4">收藏管理</el-menu-item>
              <el-menu-item index="3-5">相册管理</el-menu-item>
            </el-submenu>
            <el-menu-item index="4">
              <i class="el-icon-bell"></i>
              <span slot="title">私信</span>
            </el-menu-item>
          </el-menu>
        </v-card>

      </el-col>

      <!--   个人资料     -->
      <el-col :span="20" v-if="showUserBaseInfo">
        <!--   个人信息(头像、名称、角色等)     -->
        <v-card shadow="hover" style="margin-left: 10px;border: 1px solid #8c939d;">
          <div style="display: flex;justify-items: center">
            <div style="padding: 20px;">
              <el-avatar :size="100" style="cursor: pointer;" >
                <img :src="userBaseInfo.avatar"/>
              </el-avatar>
            </div>
            <div style="padding: 20px 10px;">
              <div>
                <span style="color: #735c0f;font-size: 25px;" >{{ userName }}</span>
                <span class="span1">
                  <font style="color: #735c0f;">{{userBaseInfo.roleName}}</font>
                </span>
              </div>
              <div style="margin-top: 20px;">
                <span style="color: #6a737d;font-size: 15px;" >
                  <span style="color: #7bc549">{{ handleCreateTime(userBaseInfo.createTime) }}</span> 加入西瓜博客
                </span>
              </div>
            </div>
          </div>
        </v-card>

        <!--   基本信息     -->
        <v-card shadow="hover" style="margin-left: 10px;margin-top: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
            <div style="padding: 20px 20px 0">
              <h2>基本信息</h2>
            </div>
            <el-divider></el-divider>
            <div style="margin-left: 10px;margin-bottom: 20px;">
              <el-form label-position="right" label-width="80px" :model="userBaseInfo"
                       :rules="saveUserBaseInfoRules" ref="saveUserBaseInfoRuleForm">
                <el-form-item label="用户名称" style="width: 70%" prop="userName">
                  <el-input v-model="userBaseInfo.userName"
                            prefix-icon="el-icon-user"
                            clearable show-word-limit maxlength="10" placeholder="请输入用户名称">
                  </el-input>
                </el-form-item>
                <el-form-item label="头像：" prop="avatar" >
                  <el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="uploadUserAvatar">
                    <img v-if="userBaseInfo.avatar" :src="userBaseInfo.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-button type="success" size="small" @click="getUserAvatarDefaultCover"> 使用默认图片 </el-button>
                </el-form-item>
                <el-form-item label="性别" style="width: 70%" prop="userSex">
                  <el-select v-model="userSex" style="width: 100%" >
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="2"></el-option>
                    <el-option label="保密" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="签名" style="width: 70%" prop="sign">
                  <el-input v-model="userBaseInfo.sign"
                            prefix-icon="el-icon-star-off"
                            clearable show-word-limit maxlength="32" placeholder="请输入签名">
                  </el-input>
                </el-form-item>
                <el-form-item label="手机号码" style="width: 70%">
                  <el-input v-model="userBaseInfo.phone" disabled
                            prefix-icon="el-icon-mobile-phone"
                            clearable show-word-limit maxlength="11" placeholder="请输入手机号码">
                  </el-input>
                </el-form-item>
                <el-form-item label="邮箱" style="width: 70%">
                  <el-input v-model="userBaseInfo.email" disabled
                            prefix-icon="el-icon-message"
                            clearable show-word-limit maxlength="50" placeholder="请输入邮箱">
                  </el-input>
                </el-form-item>
                <el-form-item label="地址" style="width: 70%" prop="address">
                  <el-input v-model="userBaseInfo.address" type="textarea"
                            clearable show-word-limit maxlength="50" placeholder="请输入地址">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"
                             @click="resetSaveUserBaseInfoForm('saveUserBaseInfoRuleForm')" plain>重置</el-button>
                  <el-button type="primary" @click="submitSaveUserBaseInfo('saveUserBaseInfoRuleForm')"
                             :loading="loading.saveUserBaseInfoLoading">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
        </v-card>
      </el-col>

      <!--   账号设置     -->
      <el-col :span="20" v-if="showAccountSetting">
        <!--   基本信息     -->
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
          <div style="padding: 20px 20px 0">
            <h2>账号设置</h2>
          </div>
          <el-divider></el-divider>
          <div style="margin-left: 10px;margin-bottom: 20px;">
            <!--   修改密码     -->
            <div style="display: flex;margin-bottom: 30px;">
              <div style="margin-left: 10px;">
                <span style="color: #1abc9c">密码</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-link @click="visible.updatePwdVisible = true" :underline="false" type="primary" style="color: #005cc5">修改密码</el-link>
              </div>
            </div>

            <!--   修改手机号码     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 30px;">
                <span style="color: #1abc9c">手机号码</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-link @click="visible.updatePhoneVisible = true" :underline="false" type="primary" style="color: #005cc5">修改手机号码</el-link>
              </div>
            </div>

            <!--   修改邮箱     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 30px;">
                <span style="color: #1abc9c">邮箱</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-link @click="visible.updateEmailVisible = true" :underline="false" type="primary" style="color: #005cc5">修改邮箱</el-link>
              </div>
            </div>

            <!--   登录记录     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 30px;">
                <span style="color: #1abc9c">登录记录</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-link @click="viewLoginRecord" :underline="false" type="primary" style="color: #005cc5">查看记录</el-link>
              </div>
            </div>

            <!--   账号注销     -->
            <div style="display: flex">
              <div style="margin-left: 10px;">
                <span style="color: #1abc9c">账号注销</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-link @click="signOut" :underline="false" type="primary" style="color: #005cc5">立即注销</el-link>
              </div>
            </div>

          </div>
        </v-card>
      </el-col>

      <!--   隐私设置     -->
      <el-col :span="20" v-if="showPrivacy">
        <!--   基本信息     -->
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
          <div style="padding: 20px 20px 0">
            <h2>隐私设置</h2>
          </div>
          <el-divider></el-divider>
          <div style="margin-left: 10px;margin-bottom: 20px;">
            <div style="margin-bottom: 20px;display: flex;">
              <el-button type="primary" size="small" @click="saveUserConfig" :loading="loading.saveUserConfigLoading">保存</el-button>
            </div>
            <!--   是否展示收藏夹     -->
            <div style="display: flex;margin-bottom: 20px;">
              <div style="margin-left: 10px;">
                <span style="color: #1abc9c">是否展示收藏夹</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.showFavorites"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否展示专栏     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否展示专栏</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.showColumn"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否展示相册     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否展示相册</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.showAlbum"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否展示关注/互动     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否展示关注/互动</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.showFollow"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否展示评论     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否展示评论</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.showComment"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否展示个人成就     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否展示个人成就</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.showAchievements"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否展示历史     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否展示历史</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.showHistory"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否接收订阅消息     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否接收订阅消息</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.receiveSubscribeMessage"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否接收私信     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否接收私信</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.receivePrivateMessage"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   是否接收系统消息     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">是否接收系统消息</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.receiveSystemMessage"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   发表文章后是否给粉丝发送消息     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">发表文章后是否给粉丝发送消息</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.sendMessageIfCreateArticle"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   创建专栏后是否给粉丝发送消息     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">创建专栏后是否给粉丝发送消息</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.sendMessageIfCreateColumn"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

            <!--   创建相册后是否给粉丝发送消息     -->
            <div style="display: flex">
              <div style="margin-left: 10px;margin-bottom: 20px;">
                <span style="color: #1abc9c">创建相册后是否给粉丝发送消息</span>
              </div>
              <div style="margin-left: auto;margin-right: 20px;">
                <el-switch
                    v-model="userConfig.sendMessageIfCreateAlbum"
                    active-text="是"
                    :active-value=1
                    :inactive-value=0
                    inactive-text="否">
                </el-switch>
              </div>
            </div>

          </div>


        </v-card>
      </el-col>

      <!--   管理 -> 内容管理     -->
      <el-col :span="20" v-if="showContentManage">
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
          <el-form :inline="true" :model="contentQueryParam" size="mini" style="padding: 20px 20px 0">
            <el-form-item label="文章标题:">
              <el-input style="width: 180px;" v-model.trim="contentQueryParam.title" placeholder="请输入标题" clearable  />
            </el-form-item>
            <el-form-item label="状态:">
              <el-select v-model="checkedContentStatusId" clearable filterable style="width:110px;" placeholder="请选择状态">
                <el-option v-for="item in contentArticleStatusList" :key="item.code" :label="item.desc" :value="item.code"   />
              </el-select>
            </el-form-item>
            <el-form-item label="审批:">
              <el-select v-model="checkedContentApproveStatusId" clearable filterable style="width:110px;" placeholder="请选择状态">
                <el-option v-for="item in contentArticleApproveStatusList" :key="item.code" :label="item.desc" :value="item.code"   />
              </el-select>
            </el-form-item>
            <el-form-item >
              <el-button icon="el-icon-search" type="primary" @click="fetchContentManageArticleList">查询</el-button>
              <el-button icon="el-icon-refresh" @click="reloadContentArticleList">重置</el-button>
            </el-form-item>
          </el-form>
        </v-card>

        <v-card v-for="(item, index) in contentArticleList" :key="item.articleId"
            shadow="hover" style="margin-left: 10px;margin-top: 10px;border: 1px solid #8c939d;"
                class="animated zoomIn article-card-comment">
          <div style="display: flex">
            <!-- 文章封面图 -->
            <div class="article-cover-comment left-radius" >
              <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank">
                <v-img class="on-hover" width="100%" height="100%" :src="item.cover" style="border-radius: 6px 0 0 6px"/>
              </router-link>
            </div>

            <div class="article-wrapper">
              <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank">
                <span style="white-space: nowrap;">
                  {{ handleArticleTitle(item.title) }}
                </span>
              </router-link>
              <span style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center;margin-left: 5px;">
                <font style="color: #f70;" v-if="item.status === 3">已发布</font>
                <font style="color: #f70;" v-if="item.status === 2">待发布</font>
                <font style="color: #f70;" v-if="item.status === 1">草稿中</font>
              </span>
              <span style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center;margin-left: 10px;">
                <font style="color: #735c0f" v-if="item.approveStatus === 1">待审批</font>
                <font style="color: #735c0f" v-if="item.approveStatus === 2">审批通过</font>
                <font style="color: #735c0f" v-if="item.approveStatus === 3">审批拒绝</font>
              </span>

              <div style="margin-top: 10px;">
                <el-tag size="small">{{ item.categoryName }}</el-tag>
                <el-tag type="info" size="small" style="margin-left: 10px;">{{ item.labelName }}</el-tag>
                <el-tag type="danger" size="small" style="margin-left: 10px;" v-if="item.publicType === 1">仅自己可见</el-tag>
                <el-tag type="success" size="small" style="margin-left: 10px;" v-if="item.publicType === 3">所有人可见</el-tag>
              </div>
              <div style="margin-top: 10px;display: flex">
                <div>
                  <strong>创建：</strong><v-icon size="14">mdi-calendar-month-outline</v-icon>
                  {{ item.createTime }}
                </div>

                <div style="margin-left: auto">
                  <el-link :underline="false"
                           type="primary"
                           @click="editArticle(item.articleId)"
                           style="font-size: 14px;color: #005cc5">编辑</el-link>
                  <el-link :underline="false"
                           type="primary"
                           @click="delArticle(item.articleId)"
                           style="font-size: 14px;color: #005cc5;margin-left: 10px;">删除</el-link>
                </div>
              </div>
            </div>
          </div>

        </v-card>

        <!-- 文章分页按钮 -->
        <v-pagination v-if="showContentManage && contentArticleList.length > 0"
                      color="#00C4B6"
                      v-model="contentManageCurrent"
                      :length="Math.ceil(contentQueryParam.total / contentQueryParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />
      </el-col>

      <!--   管理 -> 专栏列表     -->
      <el-col :span="20" v-if="showColumn">
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
          <div style="padding: 20px 20px 0">
            <h2>专栏列表</h2>
          </div>
          <el-divider></el-divider>
          <el-empty description="暂无数据..." v-if="columnParam.total === 0"></el-empty>
          <div style="margin-left: 10px;margin-bottom: 20px;" v-if="columnParam.total > 0">
            <el-row>
              <el-col :span="6" v-for="(item, index) in columnList" :key="item.columnId" >
                <v-card class="animated zoomIn article-item-card"
                    shadow="hover" :body-style="{ padding: '0px' }"
                    style="border: 1px solid #8c939d;margin-left: 8px;margin-right: 10px;margin-top: 5px;height: 200px;border-radius: 6px !important;">
                  <router-link :to="'/column/' + item.columnId" tag="a" target="_blank">
                    <img width="100%" height="100px;" :src="item.columnCover" style="border-radius: 5px 5px 0 0;"  />
                  </router-link>
                  <div style="padding: 8px;">
                    <div style="display: flex">
                      <div style="width: 50%">
                        <router-link :to="'/column/' + item.columnId" tag="a" target="_blank">
                          <span :title="item.columnName"
                                style="display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                            {{ item.columnName }}
                          </span>
                        </router-link>
                      </div>

                      <div style="margin-left: auto">
                        <el-tag type="info" size="small" style="margin-left: 10px;"
                                v-if="item.approveStatus === 1">待审批</el-tag>
                        <el-tag type="success" size="small" style="margin-left: 10px;"
                                v-if="item.approveStatus === 2">审批通过</el-tag>
                        <el-tag type="danger" size="small" style="margin-left: 10px;"
                                v-if="item.approveStatus === 3">审批拒绝</el-tag>
                      </div>

                    </div>


                    <div>
                      <time class="time">{{ item.createTime }}</time>
                    </div>
                    <el-button type="text" class="button"
                               style="margin-left: 6px;margin-top: 5px;"
                               @click="updateColumn(item.columnId)">编辑</el-button>
                    <el-button type="text" class="button"
                               @click="delColumn(item.columnId)"
                               style="margin-left: 6px;margin-top: 5px;">删除</el-button>
                  </div>
                </v-card>
              </el-col>
            </el-row>
            <!-- 文章分页按钮 -->
            <v-pagination color="#00C4B6" v-if="columnParam.total > 0"
                          v-model="columnManageCurrent"
                          :length="Math.ceil(columnParam.total / columnParam.pageSize)"
                          total-visible="10" style="margin-top: 20px;"
            />
          </div>
        </v-card>
      </el-col>

      <!--   管理 -> 创建专栏     -->
      <el-col :span="20" v-if="showCreateColumn">
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
          <div style="padding: 20px 20px 0">
            <h2>创建专栏</h2>
          </div>
          <el-divider></el-divider>
          <div style="margin-left: 10px;margin-bottom: 20px;">
            <el-form label-position="right" label-width="80px" :model="createColumn"
                     :rules="saveCreateColumnRules" ref="submitCreateColumnRuleForm">
              <el-form-item label="专栏名称" style="width: 80%" prop="columnName">
                <el-input v-model="createColumn.columnName"
                          clearable show-word-limit maxlength="20" placeholder="请输入专栏名称">
                </el-input>
              </el-form-item>
              <el-form-item label="简介" style="width: 80%" prop="columnIntro">
                <el-input v-model="createColumn.columnIntro" type="textarea"
                          clearable show-word-limit maxlength="50" placeholder="请输入简介">
                </el-input>
              </el-form-item>
              <el-form-item label="可见范围" prop="visible">
                <el-radio-group v-model="createColumn.visible" >
                  <el-radio border label="1">仅自己可见</el-radio>
                  <el-radio border label="2">所有人可见</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="封面图：" prop="columnCover" >
                <el-upload class="avatar-uploader" action="" :show-file-list="false" :http-request="uploadColumnCover">
                  <img v-if="createColumn.columnCover" :src="createColumn.columnCover" style="width: 100px;height: 100px;display: block">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-button type="success" size="small" @click="getColumnDefaultCover"> 使用默认图片 </el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"
                           @click="resetCreateColumnForm('submitCreateColumnRuleForm')" plain>重置</el-button>
                <el-button type="primary" @click="submitCreateColumn('submitCreateColumnRuleForm')"
                           :loading="loading.createColumnLoading">提交</el-button>
              </el-form-item>
            </el-form>

          </div>
        </v-card>
      </el-col>

      <!--   管理 -> 发布的评论     -->
      <el-col :span="20" v-if="showMyPublishComment">
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
          <div style="padding: 20px 20px 0">
            <h2>我发布的评论</h2>
          </div>
          <el-divider></el-divider>
          <el-empty description="暂无数据..." v-if="userPublishArticleCommentParam.total === 0"></el-empty>
          <v-card v-for="(item, index) in userPublishArticleCommentList" :key="item.commentId"
              shadow="hover" style="border: 1px solid #8c939d;margin-left: 10px;margin-top: 10px;margin-right: 10px;">
            <div style="padding: 10px;">
              <div style="display: flex">
                <div>
                  我  <span style="color: #1abc9c">{{getFormat(item.commentCreateTime)}}  </span>评论了
                  <router-link :to="'/user/' + item.articleUserId" tag="a" target="_blank">
                    <span style="color: #00a1d6"> {{ item.articleUserName }}</span>
                  </router-link>
                    的文章
                  <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank">
                    <span style="color: #00a1d6;whiteSpace: nowrap">
                      {{ handleArticleTitle(item.articleTitle)  }}
                    </span>
                  </router-link>
                </div>
                <div style="margin-left: auto">
                  <el-button size="small" type="danger"
                             @click="delComment(item.commentId)">删除</el-button>
                </div>
              </div>
              <div style="width: 80%">
                <span style=" display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap"
                      :title="item.commentContent">
                      {{ item.commentContent }}
                </span>
              </div>
            </div>

          </v-card>
          <!-- 文章分页按钮 -->
          <v-pagination color="#00C4B6" v-if="userPublishArticleCommentParam.total > 0"
                        v-model="userPublishArticleCommentCurrent"
                        :length="Math.ceil(userPublishArticleCommentParam.total / userPublishArticleCommentParam.pageSize)"
                        total-visible="7" style="margin-top: 20px;"
          />
        </v-card>

      </el-col>

      <!--   管理 -> 收到的评论     -->
      <el-col :span="20" v-if="showMyReceiveComment">
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px;border: 1px solid #8c939d;">
          <div style="padding: 20px 20px 0">
            <h2>我收到的评论</h2>
          </div>
          <el-divider></el-divider>
          <el-empty description="暂无数据..." v-if="userReceiveArticleCommentParam.total === 0"></el-empty>
          <v-card v-for="(item, index) in userReceiveArticleCommentList" :key="item.commentId"
                  shadow="hover" style="border: 1px solid #8c939d;margin-left: 10px;margin-top: 10px;margin-right: 10px;">
            <div style="padding: 10px;">
              <div style="display: flex">
                <div>
                  <el-avatar :size="60"  >
                    <img :src="item.commentUserAvatar"/>
                  </el-avatar>
                </div>
                <div style="margin-left: 10px;width: 90%">
                  <div style="display: flex">
                    <div>
                      <router-link :to="'/user/' + item.articleUserId" tag="a" target="_blank">
                        <span style="color: #00a1d6"> {{ item.commentUserName }} </span>
                      </router-link>
                      <span style="color: #1abc9c">{{ item.commentCreateTime }}</span>
                      回复了你的文章
                      <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank">
                        <span style="color: #00a1d6;whiteSpace: nowrap">
                          {{ handleArticleTitle(item.articleTitle)  }}
                        </span>
                      </router-link>
                    </div>
                    <div style="margin-left: auto">
                      <el-button size="small" type="danger"
                                 @click="delComment(item.commentId)">删除</el-button>
                    </div>
                  </div>

                  <div style="width: 80%">
                    <span style=" display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap"
                          :title="item.commentContent">
                      {{ item.commentContent }}
                    </span>
                  </div>

                </div>
              </div>
            </div>

          </v-card>
          <!-- 文章分页按钮 -->
          <v-pagination color="#00C4B6" v-if="userReceiveArticleCommentParam.total > 0"
                        v-model="userReceiveArticleCommentCurrent"
                        :length="Math.ceil(userReceiveArticleCommentParam.total / userReceiveArticleCommentParam.pageSize)"
                        total-visible="7" style="margin-top: 20px;"
          />
        </v-card>

      </el-col>

      <!--   管理 -> 收藏夹管理     -->
      <el-col :span="20" v-if="showFavorites">
        <v-card shadow="hover" style="margin-left: 10px;padding-bottom: 20px; border: 1px solid #8c939d;">
          <div style="padding: 20px 20px 0">
            <h2>收藏夹列表</h2>
          </div>
          <el-divider></el-divider>
          <el-empty description="暂无数据..." v-if="userFavoritesParam.total === 0"></el-empty>
          <v-card v-for="(item, index) in userFavoritesList" :key="item.id"
                  shadow="hover"
                  style="border: 1px solid #8c939d;margin-left: 10px;margin-top: 5px;margin-right: 10px;padding: 10px;">
            <div>
                <div >
                  <div style="width: 100%;">
                    <router-link :to=" '/favorites/' + item.id" tag="a" target="_blank">
                      <span :title="item.favoritesName"
                            style=" color: #005cc5; display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                        {{ item.favoritesName }}
                      </span>
                    </router-link>
                  </div>

                  <div>
                    <span v-if="item.visible === 1" style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center">
                        <font style="color: #f70;" >仅自己可见</font>
                    </span>
                        <span v-else style="font-size:12px;border-radius:3px;border: 1px solid  #005cc5;text-align: center">
                        <font style="color: #005cc5;" >所有人可见</font>
                    </span>
                    <span style="font-size:12px;border-radius:3px;border: 1px solid  #f70;text-align: center;margin-left: 5px;">
                        <font style="color: #f70;" >{{item.articleCount}}篇文章</font>
                    </span>
                  </div>
                </div>
            </div>
            <div style="display: flex;margin-top: 5px;">
              <div>
                <v-icon size="14">mdi-calendar-month-outline</v-icon>
                {{ item.createTime }}
              </div>
              <div style="margin-left: 20px;">
                <el-link :underline="false"
                         type="primary"
                         @click="delFavorites(item.id)"
                         v-if="item.favoritesName !== '默认收藏夹'"
                         style="font-size: 14px;color: #005cc5;margin-left: 10px;">删除</el-link>
              </div>
            </div>

          </v-card>
          <!-- 分页按钮 -->
          <v-pagination color="#00C4B6" v-if="userFavoritesParam.total > 0"
                        v-model="userFavoritesCurrent"
                        :length="Math.ceil(userFavoritesParam.total / userFavoritesParam.pageSize)"
                        total-visible="7" style="margin-top: 20px;"
          />
        </v-card>
      </el-col>



    </el-row>

    <!-- 修改密码的弹框   -->
    <el-dialog title="修改密码" :visible.sync="visible.updatePwdVisible" width="30%" >
      <el-form label-position="right" label-width="80px" :model="updatePwdFormData" :rules="updatePwdRules" ref="updatePwdRuleForm">
        <el-form-item label="原密码" prop="oldPwd">
          <el-input v-model="updatePwdFormData.oldPwd" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input v-model="updatePwdFormData.newPwd" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="updatePwdFormData.confirmPwd" type="password" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="resetUpdatePwdForm('updatePwdRuleForm')">取消</el-button>
          <el-button type="primary" @click="submitUpdatePwd('updatePwdRuleForm')"
                     :loading="loading.uploadPwdLoading">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改手机号码的弹框   -->
    <el-dialog title="修改手机号码" :visible.sync="visible.updatePhoneVisible" width="30%" >
      <el-form label-position="right" label-width="100px" :model="updatePhoneFormData" :rules="updatePhoneRules" ref="updatePhoneRuleForm">
        <el-form-item label="新手机号码" prop="phone" style="width: 500px;">
          <el-input v-model="updatePhoneFormData.phone"  prefix-icon="el-icon-mobile-phone"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="width: 500px;" >
          <div style="display: flex">
            <el-input v-model="updatePhoneFormData.code" prefix-icon="el-icon-message" style="width: 60%"></el-input>
            <div style="margin-left: auto">
              <el-button type="primary" @click="getPhoneCode" :disabled="phoneCountdown > 0" >
                {{ phoneCountdown > 0 ? `${ phoneCountdown }秒后重新获取` : '获取短信验证码' }}
              </el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="resetUpdatePhoneForm('updatePhoneRuleForm')">取消</el-button>
          <el-button type="primary" @click="submitUpdatePhone('updatePhoneRuleForm')"
                     :loading="loading.uploadPhoneLoading">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改邮箱的弹框   -->
    <el-dialog title="修改邮箱" :visible.sync="visible.updateEmailVisible" width="30%" >
      <el-form label-position="right" label-width="100px" :model="updateEmailFormData" :rules="updateEmailRules" ref="updateEmailRuleForm">
        <el-form-item label="新邮箱" prop="email" style="width: 500px;">
          <el-input v-model="updateEmailFormData.email"  prefix-icon="el-icon-message"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" style="width: 500px;" >
          <div style="display: flex">
            <el-input v-model="updateEmailFormData.code" prefix-icon="el-icon-message" style="width: 60%"></el-input>
            <div style="margin-left: auto">
              <el-button type="primary" @click="getEmailCode" :disabled="emailCountdown > 0" >
                {{ emailCountdown > 0 ? `${ emailCountdown }秒后重新获取` : '获取邮箱验证码' }}
              </el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="resetUpdateEmailForm('updateEmailRuleForm')">取消</el-button>
          <el-button type="primary" @click="submitUpdateEmail('updateEmailRuleForm')"
                     :loading="loading.uploadEmailLoading">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看登录记录的弹框   -->
    <el-dialog title="登录记录" :visible.sync="visible.viewLoginRecordVisible" width="30%" :before-close="handleCloseLoginRecord">
      <div class="block">
        <el-timeline>
          <el-timeline-item
              v-for="(item, index) in loginRecordList" :key="item.id"
              :timestamp="item.createTime" placement="top" color="#0bbd87">
            <el-card>
              <div style="display: flex">
                <h3>{{ item.loginResult }}</h3>
                <span class="span1">
                  <font style="color: #735c0f;" >{{ item.loginType }}</font>
                </span>
              </div>
              <p style="margin-top: 8px;" v-if=" item.loginResult === '登录失败' ">{{ item.failReason }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <v-pagination color="#00C4B6"
                      v-model="loginRecordCurrent"
                      :length="Math.ceil(loginRecordParam.total / loginRecordParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

      </div>
    </el-dialog>


    <!-- 编辑专栏信息的弹框   -->
    <el-dialog title="编辑专栏"
               :visible.sync="visible.updateColumnVisible"
               width="30%">

        <el-form label-position="right" label-width="80px" :model="editColumn"
                 :rules="editColumnRules" ref="editColumnRuleForm">
          <el-form-item label="专栏名称" style="width: 80%" prop="columnName">
            <el-input v-model="editColumn.columnName"
                      clearable show-word-limit maxlength="20" placeholder="请输入专栏名称">
            </el-input>
          </el-form-item>
          <el-form-item label="简介" style="width: 80%" prop="columnIntro">
            <el-input v-model="editColumn.columnIntro" type="textarea"
                      clearable show-word-limit maxlength="50" placeholder="请输入简介">
            </el-input>
          </el-form-item>
          <el-form-item label="可见范围" prop="visible">
            <el-radio-group v-model="editColumn.visible" >
              <el-radio border :label="1">仅自己可见</el-radio>
              <el-radio border :label="2">所有人可见</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="封面图：" prop="columnCover" >
            <el-upload class="avatar-uploader"
                       action=""
                       :show-file-list="false"
                       :http-request="uploadEditColumnCover">
              <img v-if="editColumn.columnCover" :src="editColumn.columnCover" style="width: 100px;height: 100px;display: block">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-button type="success" size="small" @click="getEditColumnDefaultCover"> 使用默认图片 </el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="resetEditColumnForm('editColumnRuleForm')" plain>取消</el-button>
            <el-button type="primary" @click="submitEditColumn('editColumnRuleForm')"
                       :loading="loading.editColumnLoading">提交</el-button>
          </el-form-item>
        </el-form>


    </el-dialog>


  </div>

</template>


<script>
import { updateUserPwd,
  getPhoneCodeForUpdatePhone,
  updateUserPhone,
  getEmailCodeForUpdateEmail,
  updateUserEmail,
  signOutUser,
  userDetail,
  editUser,
  getUserConfig,
  saveUserConfig } from '../../api/user';
import {
  delUserId,
  delUserName,
  delAuthentication,
  delUserAvatar,
  delArticleViews, getUserId
} from "../../utils/cookieUtil";
import { loginLogList } from '../../api/server';
import { getContentManageArticleList, deleteArticle } from '../../api/article';
import { uploadFile } from "../../api/file";
import articleColumnApi from '../../api/articleColumn';
import { setUserAvatar } from '../../utils/cookieUtil';
import { getUserComment, delComment, getUserReceiveComment } from '../../api/comment';
import { dateFormat } from "../../utils/date";
import userFavoritesApi from '../../api/userFavorites';

export default {
  data() {
    return {
      commentTest: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
      userName: '',
      phoneCountdown: 0,
      emailCountdown: 0,
      loginRecordCurrent: 1,
      contentManageCurrent: 1,
      columnManageCurrent: 1,
      userPublishArticleCommentCurrent: 1,
      userReceiveArticleCommentCurrent: 1,
      userFavoritesCurrent: 1,
      loginRecordParam: {
        pageNo: 1,
        pageSize: 3,
        total: 0
      },
      columnParam: {
        pageNo: 1,
        pageSize: 8,
        total: 0,
        userId: this.$route.params.userId
      },
      userPublishArticleCommentParam: {
        pageNo: 1,
        pageSize: 10,
        userId: this.$route.params.userId,
        total: 0
      },
      userReceiveArticleCommentParam: {
        pageNo: 1,
        pageSize: 10,
        userId: this.$route.params.userId,
        total: 0
      },
      userFavoritesParam: {
        pageNo: 1,
        pageSize: 10,
        userId: this.$route.params.userId,
        total: 0
      },
      userBaseInfo: {
        avatar: '',
        roleName: '',
        createTime: '',
        userName: '',
        sex: '',
        phone: '',
        email: '',
        address: '',
        sign: '',
        userId: this.$route.params.userId,
      },
      createColumn: {
        columnName: '',
        columnIntro: '',
        columnCover: '',
        visible: ''
      },
      editColumn: {
        columnName: '',
        columnIntro: '',
        columnCover: '',
        visible: ''
      },
      userSex: '',
      contentQueryParam: {
        pageNo: 1,
        pageSize: 8,
        total: 0,
        title: '',
        status: '',
        approveStatus: '',
        authorId: this.$route.params.userId,
      },
      checkedContentStatusId: 0,
      checkedContentApproveStatusId: 0,
      showMyReceiveComment: false,
      showUserBaseInfo: true,
      showAccountSetting: false,
      showContentManage: false,
      showColumn: false,
      showCreateColumn: false,
      showMyPublishComment: false,
      showFavorites: false,
      showPrivacy: false,
      visible: {
        updatePwdVisible: false,
        updatePhoneVisible: false,
        updateEmailVisible: false,
        viewLoginRecordVisible: false,
        updateColumnVisible: false,
      },
      updatePwdFormData: {
        userId: this.$route.params.userId,
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      updatePhoneFormData: {
        phone: '',
        code: ''
      },
      updateEmailFormData: {
        email: '',
        code: ''
      },
      loading: {
        uploadPwdLoading: false,
        uploadPhoneLoading: false,
        uploadEmailLoading: false,
        saveUserBaseInfoLoading: false,
        createColumnLoading: false,
        editColumnLoading: false,
        saveUserConfigLoading: false,
      },
      loginRecordList: [],
      contentArticleList: [],
      columnList: [],
      userPublishArticleCommentList: [],
      userReceiveArticleCommentList: [],
      userFavoritesList: [],
      contentArticleStatusList: [
        { code: 0, desc: "全部"},
        { code: 3, desc: "已发布"},
        { code: 2, desc: "待发布"},
        { code: 1, desc: "草稿中"}
      ],
      contentArticleApproveStatusList: [
        { code: 0, desc: "全部"},
        { code: 1, desc: "待审批"},
        { code: 2, desc: "审批通过"},
        { code: 3, desc: "审批拒绝"}
      ],
      updatePwdRules: {
        oldPwd: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
        ],
        newPwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        confirmPwd: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
        ],
      },
      updatePhoneRules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
      },
      updateEmailRules: {
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
      },
      saveUserBaseInfoRules: {
        userName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        avatar: [
          { required: true, message: '请上传用户头像', trigger: 'change'}
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        sign: [
          { required: true, message: '请输入签名', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
      },
      saveCreateColumnRules: {
        columnName: [
          { required: true, message: '请输入专栏名称', trigger: 'blur' }
        ],
        columnIntro: [
          { required: true, message: '请输入专栏简介', trigger: 'blur' }
        ],
        columnCover: [
          { required: true, message: '请上传专栏封面', trigger: 'change' }
        ],
        visible: [
          { required: true, message: '请选择可见范围', trigger: 'change' }
        ]
      },
      editColumnRules: {
        columnName: [
          { required: true, message: '请输入专栏名称', trigger: 'blur' }
        ],
        columnIntro: [
          { required: true, message: '请输入专栏简介', trigger: 'blur' }
        ],
        columnCover: [
          { required: true, message: '请上传专栏封面', trigger: 'change' }
        ],
        visible: [
          { required: true, message: '请选择可见范围', trigger: 'change' }
        ]
      },
      userConfig: {
        sendMessageIfCreateArticle: 1,
        sendMessageIfCreateColumn: 1,
        sendMessageIfCreateAlbum: 1,
        receiveSystemMessage: 1,
        receivePrivateMessage: 1,
        receiveSubscribeMessage: 1,
        showFavorites: 1,
        showColumn: 1,
        showAlbum: 1,
        showFollow: 1,
        showComment: 1,
        showAchievements: 1,
        showHistory: 1
      }


    }
  },

  created() {
    const currentLoginUserId = getUserId();
    if (this.$route.params.userId !== currentLoginUserId) {
      this.$router.push("/404");
      return;
    }
    this.getUserDetailInfo();
  },

  methods: {
    // 左侧切换菜单
    handleSelect(key) {
      if (key === '1') {
        // 展示个人资料
        this.showUserBaseInfo = true;
        this.showPrivacy = false;
        this.showAccountSetting = false;
        this.showContentManage = false;
        this.showColumn = false;
        this.showCreateColumn = false;
        this.showMyPublishComment = false;
        this.showMyReceiveComment = false;
        this.showFavorites = false;
        this.getUserDetailInfo();
      } else if (key === '2') {
        // 展示账号设置
        this.showUserBaseInfo = false;
        this.showAccountSetting = true;
        this.showContentManage = false;
        this.showPrivacy = false;
        this.showColumn = false;
        this.showCreateColumn = false;
        this.showMyPublishComment = false;
        this.showMyReceiveComment = false;
        this.showFavorites = false;
      } else if (key === '3-1') {
        // 展示内容管理
        this.showContentManage = true;
        this.showUserBaseInfo = false;
        this.showAccountSetting = false;
        this.showPrivacy = false;
        this.showColumn = false;
        this.showCreateColumn = false;
        this.showMyPublishComment = false;
        this.showMyReceiveComment = false;
        this.showFavorites = false;
        this.contentManageCurrent = 1;
        this.fetchContentManageArticleList();
      } else if (key === '3-2-2') {
        // 展示专栏列表
        this.showContentManage = false;
        this.showUserBaseInfo = false;
        this.showAccountSetting = false;
        this.showColumn = true;
        this.showCreateColumn = false;
        this.showPrivacy = false;
        this.showMyPublishComment = false;
        this.showMyReceiveComment = false;
        this.showFavorites = false;
        this.columnManageCurrent = 1;
        this.fetchColumnList();
      } else if (key === '3-2-1') {
        // 展示创建专栏
        this.showContentManage = false;
        this.showUserBaseInfo = false;
        this.showAccountSetting = false;
        this.showPrivacy = false;
        this.showColumn = false;
        this.showCreateColumn = true;
        this.showMyPublishComment = false;
        this.showMyReceiveComment = false;
        this.showFavorites = false;
      } else if (key === '3-3-1') {
        // 发布的评论
        this.showContentManage = false;
        this.showUserBaseInfo = false;
        this.showAccountSetting = false;
        this.showColumn = false;
        this.showCreateColumn = false;
        this.showMyPublishComment = true;
        this.userPublishArticleCommentCurrent = 1;
        this.showMyReceiveComment = false;
        this.showPrivacy = false;
        this.showFavorites = false;
        this.fetchUserPublishArticleComment();
      } else if (key === '3-3-2') {
        // 收到的评论
        this.showContentManage = false;
        this.showUserBaseInfo = false;
        this.showAccountSetting = false;
        this.showColumn = false;
        this.showCreateColumn = false;
        this.showMyPublishComment = false;
        this.showFavorites = false;
        this.showPrivacy = false;
        this.showMyReceiveComment = true;
        this.userReceiveArticleCommentCurrent = 1;
        this.fetchUserReceiveArticleComment();
      } else if (key === '3-4') {
        // 收藏管理
        this.showContentManage = false;
        this.showUserBaseInfo = false;
        this.showAccountSetting = false;
        this.showColumn = false;
        this.showCreateColumn = false;
        this.showMyPublishComment = false;
        this.showMyReceiveComment = false;
        this.showPrivacy = false;
        this.showFavorites = true;
        this.userFavoritesCurrent = 1;
        this.fetchMyFavorites();
      } else if (key === '5') {
        // 隐私设置
        this.showContentManage = false;
        this.showUserBaseInfo = false;
        this.showAccountSetting = false;
        this.showColumn = false;
        this.showCreateColumn = false;
        this.showMyPublishComment = false;
        this.showMyReceiveComment = false;
        this.showFavorites = false;
        this.showPrivacy = true;
        this.fetchUserConfig();
      }
    },

    // 查询个人配置
    fetchUserConfig() {
      getUserConfig(this.$route.params.userId).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userConfig = data;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 保存用户个人配置
    saveUserConfig() {
      this.loading.saveUserConfigLoading = true;
      saveUserConfig(this.userConfig).then(res => {
        const { code, message } = res;
        if (code === 200) {
          this.$message.success('保存成功');
        } else {
          this.$message.error(message);
        }
        this.loading.saveUserConfigLoading = false;
      })
    },

    // 查询我的收藏夹
    fetchMyFavorites() {
      this.userFavoritesParam.pageNo = this.userFavoritesCurrent;
      userFavoritesApi.getUserFavorites(this.userFavoritesParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userFavoritesParam.total = data.total;
          this.userFavoritesList = data.list;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 删除收藏夹
    delFavorites(id) {
      this.$confirm('确认删除该收藏夹吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        userFavoritesApi.deleteFavorites(id).then(res => {
          const { code, message } = res;
          if (code === 200) {
            this.$message.success('删除成功');
            this.fetchMyFavorites();
          } else {
            this.$message.error(message);
          }
        })
      }).catch(() => {
        // 取消删除
      });
    },

    // 查询专栏
    fetchColumnList() {
      this.columnParam.pageNo = this.columnManageCurrent;
      articleColumnApi.columnList(this.columnParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.columnList = data.list;
          this.columnParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询个人资料信息
    getUserDetailInfo() {
      userDetail(this.$route.params.userId).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userBaseInfo = data;
          this.userName = this.userBaseInfo.userName;
          const sex = this.userBaseInfo.sex;
          if (sex === 1) {
            this.userSex = '男';
          } else if (sex === 2) {
            this.userSex = '女';
          } else {
            this.userSex = '保密';
          }
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询内容管理中的文章列表
    fetchContentManageArticleList() {
      if (this.checkedContentStatusId === 0) {
        this.contentQueryParam.status = '';
      } else {
        this.contentQueryParam.status = this.checkedContentStatusId;
      }

      if (this.checkedContentApproveStatusId === 0) {
        this.contentQueryParam.approveStatus = '';
      } else {
        this.contentQueryParam.approveStatus = this.checkedContentApproveStatusId;
      }

      this.contentQueryParam.pageNo = this.contentManageCurrent;
      getContentManageArticleList(this.contentQueryParam).then(res => {
        const { code, message, data } = res;
        if (code === 200) {
          this.contentArticleList = data.list;
          this.contentQueryParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询用户发布的评论
    fetchUserPublishArticleComment() {
      this.userPublishArticleCommentParam.pageNo = this.userPublishArticleCommentCurrent;
      getUserComment(this.userPublishArticleCommentParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userPublishArticleCommentParam.total = data.total;
          this.userPublishArticleCommentList = data.list;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询用户收到的评论
    fetchUserReceiveArticleComment() {
      this.userReceiveArticleCommentParam.pageNo = this.userReceiveArticleCommentCurrent;
      getUserReceiveComment(this.userReceiveArticleCommentParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userReceiveArticleCommentList = data.list;
          this.userReceiveArticleCommentParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查看登录记录
    viewLoginRecord() {
      this.loginRecordParam.pageNo = this.loginRecordCurrent;
      loginLogList(this.loginRecordParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.visible.viewLoginRecordVisible = true;
          this.loginRecordList = data.list;
          this.loginRecordParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 提交编辑专栏
    submitEditColumn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading.editColumnLoading = true;
          articleColumnApi.editColumn(this.editColumn).then(res => {
            const { code, message } = res;
            if (code === 200) {
              this.$message.success('编辑成功');
              this.visible.updateColumnVisible = false;
              this.loading.editColumnLoading = false;
              this.fetchColumnList();
            } else {
              this.$message.error(message);
              this.visible.updateColumnVisible = false;
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 提交修改密码
    submitUpdatePwd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.updatePwdFormData.newPwd !== this.updatePwdFormData.confirmPwd) {
            this.$message.error('新密码与确认密码不一致，请重新输入');
            this.updatePwdFormData.newPwd = '';
            this.updatePwdFormData.confirmPwd = '';
            return;
          }

          this.loading.uploadPwdLoading = true;
          updateUserPwd(this.updatePwdFormData).then(res => {
            const { code, message } = res;
            if (code === 200) {
              this.$message.success('密码修改成功');
            } else {
              this.$message.success(message);
            }
            this.loading.uploadPwdLoading = false;
            this.visible.updatePwdVisible = false;
            this.updatePwdFormData = {};
            this.updatePwdFormData.userId = this.$route.params.userId;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 提交修改手机号码
    submitUpdatePhone(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.updatePhoneFormData.phone.length !== 11) {
            this.$message.error('手机号码不合法');
            return;
          }

          this.loading.uploadPhoneLoading = true;
          updateUserPhone(this.updatePhoneFormData).then(res => {
            const { code, message } = res;
            if (code === 200) {
              this.$message.success('手机号码修改成功');
            } else {
              this.$message.success(message);
            }
            this.loading.uploadPhoneLoading = false;
            this.visible.updatePhoneVisible = false;
            this.phoneCountdown = 0;
            this.updatePhoneFormData = {};
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 提交修改邮箱
    submitUpdateEmail(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading.uploadEmailLoading = true;
          updateUserEmail(this.updateEmailFormData).then(res => {
            const { code, message } = res;
            if (code === 200) {
              this.$message.success('邮箱修改成功');
            } else {
              this.$message.success(message);
            }
            this.loading.uploadEmailLoading = false;
            this.visible.updateEmailVisible = false;
            this.emailCountdown = 0;
            this.updateEmailFormData = {};
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 提交保存个人基本信息
    submitSaveUserBaseInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading.saveUserBaseInfoLoading = true;
          this.userBaseInfo.sex = this.userSex;
          if (this.userBaseInfo.sex === '男') {
            this.userBaseInfo.sex = 1;
          } else if (this.userBaseInfo.sex === '女') {
            this.userBaseInfo.sex = 2;
          } else if (this.userBaseInfo.sex === '保密') {
            this.userBaseInfo.sex = 3;
          }
          editUser(this.userBaseInfo).then(res => {
            const { code, message } = res;
            if (code === 200) {
              this.$message.success('保存成功');
            } else {
              this.$message.error(message);
            }
            this.loading.saveUserBaseInfoLoading = false;
            this.getUserDetailInfo();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 提交创建专栏
    submitCreateColumn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading.createColumnLoading = true;
          articleColumnApi.createColumn(this.createColumn).then(res => {
            const { code, message } = res;
            if (code === 200) {
              this.$message.success('专栏创建成功,等待管理员审批');
              this.resetCreateColumnForm(formName);
            } else {
              this.$message.error(message);
            }
            this.loading.createColumnLoading = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 获取短信验证码
    getPhoneCode() {
      if (!this.updatePhoneFormData.phone) {
        this.$message.error('请输入手机号码');
        return;
      }

      if (this.updatePhoneFormData.phone.length !== 11) {
        this.$message.error('手机号码不合法');
        return;
      }

      if (this.phoneCountdown > 0) {
        return;
      }
      this.phoneCountdown = 60;
      getPhoneCodeForUpdatePhone(this.updatePhoneFormData.phone).then(res => {
        const { code, message } = res;
        if (code === 200) {
          this.$message.success('验证码已发送');
          const intervalId = setInterval(() => {
            if (this.phoneCountdown > 0) {
              this.phoneCountdown -= 1;
            } else {
              clearInterval(intervalId);
            }
          }, 1000);
        } else {
          this.phoneCountdown = 0;
          this.$message.error(message);
        }
      })
    },

    // 获取邮箱验证码
    getEmailCode() {
      if (!this.updateEmailFormData.email) {
        this.$message.error('请输入邮箱');
        return;
      }

      if (this.emailCountdown > 0) {
        return;
      }
      this.emailCountdown = 60;
      getEmailCodeForUpdateEmail(this.updateEmailFormData.email).then(res => {
        const { code, message } = res;
        if (code === 200) {
          this.$message.success('验证码已发送');
          const intervalId = setInterval(() => {
            if (this.emailCountdown > 0) {
              this.emailCountdown -= 1;
            } else {
              clearInterval(intervalId);
            }
          }, 1000);
        } else {
          this.emailCountdown = 0;
          this.$message.error(message);
        }
      })

    },

    // 注销账号
    signOut() {
      this.$confirm('注销账号后，你的账号信息将会彻底清除且会立即下线，确认执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        signOutUser().then(res => {
          const { code, message } = res;
          if (code === 200) {
            this.$message.success('注销成功');
            delUserId();
            delAuthentication();
            delUserAvatar();
            delUserName();
            delArticleViews();
            this.$router.push("/");
          } else {
            this.$message.error(message);
          }
        })
      }).catch(() => {
        // 取消删除
      });
    },

    // 上传专栏封面
    uploadColumnCover(file) {
      const data = new FormData();
      data.append('file', file.file);
      data.append('type', 'article_img');
      uploadFile(data).then(res => {
        const { code, message, data } = res;
        if (code === 200) {
          this.createColumn.columnCover = data;
          this.$forceUpdate();
        } else {
          this.$message.error(message);
        }
      }).catch(err => {
        this.$message.error('系统异常');
      })
    },

    // 上传编辑时专栏封面
    uploadEditColumnCover(file) {
      const data = new FormData();
      data.append('file', file.file);
      data.append('type', 'article_img');
      uploadFile(data).then(res => {
        const { code, message, data } = res;
        if (code === 200) {
          this.editColumn.columnCover = data;
          this.$forceUpdate();
        } else {
          this.$message.error(message);
        }
      }).catch(err => {
        this.$message.error('系统异常');
      })
    },

    // 上传用户头像
    uploadUserAvatar(file) {
      const data = new FormData();
      data.append('file', file.file);
      data.append('type', 'article_img');
      uploadFile(data).then(res => {
        const { code, message, data } = res;
        if (code === 200) {
          this.userBaseInfo.avatar = data;
          setUserAvatar(this.userBaseInfo.avatar);
          this.$forceUpdate();
        } else {
          this.$message.error(message);
        }
      }).catch(err => {
        this.$message.error('系统异常');
      })
    },

    // 删除专栏
    delColumn(columnId) {
      this.$confirm('确认删除这个专栏吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        articleColumnApi.delColumn(columnId).then(res => {
          const { code, message } = res;
          if (code === 200) {
            this.$message.success('删除成功');
            this.fetchColumnList();
          } else {
            this.$message.error(message);
          }
        })
      }).catch(() => {
        // 取消删除
      });
    },

    resetUpdatePwdForm(formName) {
      this.$refs[formName].resetFields();
      this.visible.updatePwdVisible = false;
      this.loading.uploadPwdLoading = false;
    },

    resetUpdatePhoneForm(formName) {
      this.$refs[formName].resetFields();
      this.visible.updatePhoneVisible = false;
      this.loading.uploadPhoneLoading = false;
      this.phoneCountdown = 0;
    },

    resetUpdateEmailForm(formName) {
      this.$refs[formName].resetFields();
      this.visible.updateEmailVisible = false;
      this.loading.uploadEmailLoading = false;
      this.emailCountdown = 0;
    },

    resetSaveUserBaseInfoForm(formName) {
      this.$refs[formName].resetFields();
      this.loading.saveUserBaseInfoLoading = false;
      this.getUserDetailInfo();
    },

    resetCreateColumnForm(formName) {
      this.$refs[formName].resetFields();
      this.loading.createColumnLoading = false;
      this.createColumn = {};
    },

    resetEditColumnForm(formName) {
      this.$refs[formName].resetFields();
      this.loading.editColumnLoading = false;
      this.visible.updateColumnVisible = false;
    },

    // 关闭查看登录日志的弹框
    handleCloseLoginRecord() {
      this.visible.viewLoginRecordVisible = false;
      this.loginRecordCurrent = 1;
      this.loginRecordParam.pageNo = 1;
      this.loginRecordParam.pageSize = 3;
      this.loginRecordParam.total = 0;
    },

    reloadContentArticleList() {
      this.contentQueryParam.title = '';
      this.checkedContentApproveStatusId = 0;
      this.checkedContentStatusId = 0;
      this.contentQueryParam.pageSize = 8;
      this.contentQueryParam.pageNo = 1;
      this.contentQueryParam.total = 0;
      this.fetchContentManageArticleList();
    },

    // 编辑内容管理中的文章
    editArticle(articleId) {
      this.$router.push('/editArticle/' + articleId);
    },

    // 删除内容管理中的文章
    delArticle(articleId) {
      this.$confirm('确认删除这篇文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        deleteArticle(articleId).then(res => {
          const { code, message } = res;
          if (code === 200) {
            this.$message.success('删除成功');
          } else {
            this.$message.error(message);
          }
          // 刷新列表
          this.fetchContentManageArticleList();
        })
      }).catch(() => {
        // 取消删除
      });
    },

    handleArticleTitle(val) {
      if (val.length > 18) {
        return val.substr(0, 18) + "...";
      }
      return val;
    },

    handleColumnTitle(val) {
      if (val.length > 8) {
        return val.substr(0, 8) + "...";
      }
      return val;
    },

    handleCreateTime(val) {
      if (!val) {
        return '';
      }
      return val.substr(0, 10);
    },

    // 删除评论
    delComment(commentId) {
      let param  = {
        userId: this.$route.params.userId,
        commentIds: []
      }
      param.commentIds.push(commentId);
      this.$confirm('确认删除这篇文章吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delComment(param).then(res => {
          const { code, message } = res;
          if (code === 200) {
            this.$message.success('删除成功');
            this.userPublishArticleCommentCurrent = 1;
            this.fetchUserPublishArticleComment();
          } else {
            this.$message.error(message);
          }
        })
      }).catch(() => {
        // 取消删除
      });
    },

    // 获取专栏默认的封面
    getColumnDefaultCover() {
      this.createColumn.columnCover = 'https://blog4j.oss-cn-shanghai.aliyuncs.com/article_img/20240811/f6d03dda7e.jpg';
    },

    // 获取专栏默认的封面
    getEditColumnDefaultCover() {
      this.editColumn.columnCover = 'https://blog4j.oss-cn-shanghai.aliyuncs.com/article_img/20240811/f6d03dda7e.jpg';
    },

    // 打开编辑专栏的弹框
    updateColumn(columnId) {
      this.loading.editColumnLoading = false;
      articleColumnApi.columnInfo(columnId).then(res => {
        const { code, message, data } = res;
        if (code === 200) {
          this.editColumn = data;
          this.visible.updateColumnVisible = true;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取用户头像默认图片
    getUserAvatarDefaultCover() {
      this.userBaseInfo.avatar = 'https://blog4j.oss-cn-shanghai.aliyuncs.com/article_img/20240811/f6d03dda7e.jpg';
      setUserAvatar(this.userBaseInfo.avatar)
    },

    // 格式化日期
    getFormat(date){
      return dateFormat(date);
    },

  },

  watch: {
    loginRecordCurrent(value) {
      if (this.visible.viewLoginRecordVisible) {
        this.loginRecordCurrent = value;
        this.viewLoginRecord();
      }
    },

    contentManageCurrent(value) {
      this.contentManageCurrent = value;
      this.fetchContentManageArticleList();
    },

    columnManageCurrent(value) {
      this.columnManageCurrent = value;
      this.fetchColumnList();
    } ,

    userPublishArticleCommentCurrent(val) {
      this.userPublishArticleCommentCurrent = val;
      this.fetchUserPublishArticleComment();
    },

    userReceiveArticleCommentCurrent(val) {
      this.userReceiveArticleCommentCurrent = val;
      this.fetchUserReceiveArticleComment();
    },

    userFavoritesCurrent(val) {
      this.userFavoritesCurrent = val;
      this.fetchMyFavorites();
    }



  },


  computed: {
    cover() {
      return "background: url(" + 'https://blog4j.oss-cn-shanghai.aliyuncs.com/article_img/20240807/a0fad306c0.jpg' + ") center center / cover no-repeat";
    }
  },
}

</script>



<style>
.home-container {
  max-width: 1000px;
  margin: 350px auto 28px auto;
  padding: 0 5px;
}

.span1 {
  font-size:12px;
  border-radius:3px;
  border: 1px solid  #f70;
  text-align: center;
  margin-left: 5px;
}

.article-card {
  display: flex;
  align-items: center;
  height: 280px;
  width: 100%;
  margin-top: 20px;
}

.article-card:hover .on-hover {
  transform: scale(1.1);
}

.article-card {
  margin-top: 1rem;
}

.article-cover-comment {
  overflow: hidden;
  height: 100%;
  width: 25%;
}

.article-wrapper {
  padding: 0 1.5rem;
  width: 80%;
}

.article-wrapper {
  font-size: 14px;
}

.article-wrapper a {
  font-size: 1.5rem;
  transition: all 0.3s;
}

.article-wrapper a:hover {
  color: #8e8cd8;
}


.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.article-item-card {
  border-radius: 8px !important;
  box-shadow: 0 4px 8px 6px rgba(7, 17, 27, 0.06);
}

.article-item-card a {
  transition: all 0.3s;
}

.article-item-card a:hover {
  color: #8e8cd8;
}

.article-item-cover {
  height: 220px;
  overflow: hidden;
}

</style>